<template>
  <el-container class="full-height">
    <el-header class="header">
      <div>
        <div style="height: 60px; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #ddd">
          <div style="flex: 1">
            <div style="padding-left: 20px; display: flex; align-items: center">
              <el-icon><Menu /></el-icon>
              <div style="font-weight: bold; font-size: 24px; margin-left: 5px">Mbti职业性格测试系统</div>
            </div>
          </div>
          <div style="width: fit-content; padding-right: 10px; display: flex; align-items: center;">
            <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" style="width: 40px; height: 40px">
            <span style="margin-left: 5px">管理员</span>
          </div>
        </div>
      </div>
    </el-header>

    <el-container>
      <el-aside width="200px" class="aside">
        <el-menu
            router
            :default-active="$route.path"
        >
          <el-menu-item index="/results">
            <el-icon><User /></el-icon>
            <span>学生测试结果管理</span>
          </el-menu-item>
          <el-menu-item index="/questions">
            <el-icon><Document /></el-icon>
            <span>MBTI题库管理</span>
          </el-menu-item>
          <el-menu-item index="/visual">
            <el-icon><Memo /></el-icon>
            <span>测试结果可视化</span>
          </el-menu-item>
          <el-menu-item index="/exit" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { useRoute } from 'vue-router'
import router from "@/router";
const $route = useRoute()
console.log($route.path)

const logout = () => {
  router.push('/');
  localStorage.removeItem('student-user')

}
</script>

<style scoped>
.full-height {
  height: 100vh;
}

.header {
  background-color: #b3c0d1;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
}

.aside {
  background-color: #b3c0d1;

}

.main {
  padding: 20px;
  height: 100%; /* 主要区域撑满剩余高度 */
  overflow: auto; /* 如果内容溢出可滚动 */
}
</style>
